<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>18</title>
</head>
<style>
  #div {
    width: 400px;
    height: 500px;
    background-color: chocolate;
  }

  #div1 {
    width: 100px;
    height: 100px;
    background-color: darkorchid;
  }

  #div2 {
    width: 100px;
    height: 100px;
    background-color: rgb(13, 228, 120);
  }

  #div3 {
    width: 100px;
    height: 100px;
    background-color: rgb(189, 219, 18);
  }
</style>

<body>
  <div id="div">
    这是 div
    <div id="div1">这是div1</div>
    <div id="div2">这是div2</div>
  </div>

  <script>
    // 1、当 useCapture 为默认 false 时,为 事件冒泡：
    // window.onload = function () {
    //   let div = document.getElementById('div');
    //   let div1 = document.getElementById('div1');
    //   div.addEventListener('click', function () {
    //     console.log('打印div')
    //   })
    //   div1.addEventListener('click', function () {
    //     console.log('打印div1')
    //   })
    // }
    // 结果:打印 div1  打印 div


    // 2、当 useCapture 为 true 时,为 事件捕获：
    // window.onload = function () {
    //   let div = document.querySelector('div');
    //   let div1 = document.getElementById('div1');
    //   div.addEventListener('click', function () {
    //     console.log('打印div')
    //   }, true)
    //   div1.addEventListener('click', function () {
    //     console.log('打印div1')
    //   })
    // }
    // 结果:打印 div   打印 div1



    // 事件委托 的优点：
    // （1）提高性能:每一个函数都会占用内存空间，只需添加一个事件处理程序代理所有事件,所占用的内存空间更少。
    // （2）动态监听:使用事件委托可以自动绑定动态添加的元素,即新增的节点不需要主动添加也可以一样具有和其他元素一样的事件
    
    // 虽然没有给div1和div2添加点击事件,但是无论是点击div1还是div2,都会打印当前节点。因为其父级绑定了点击事件,点击div1后冒泡上去的时候,执行父级的事件。
    // 这样无论后代新增了多少个节点,一样具有这个点击事件的功能。
    window.onload = function () {
      let div = document.getElementById('div');

      div.addEventListener('click', function (e) {
        console.log(e.target)
      })

      let div3 = document.createElement('div');
      div3.setAttribute('id', 'div3')
      div3.innerHTML = '这是div3';
      div.appendChild(div3)
    }



  </script>

</body>

</html>